<template>
  <div class="right-contact">
    <!-- 悬浮按钮组 -->
    <div class="contact-btns">
      <div class="contact-btn main" @click="showConsult = true">
        <img src="@/assets/index/kec.png" alt="" class="keicon-img" />
        <span>课程咨询</span>
      </div>
      <div class="contact-btn" ref="phoneBtn">
        <div @mouseenter="showPhone = true" @mouseleave="onPhoneLeave" class="small-btn">
          <img :src="showPhone
              ? require('@/assets/index/di2.png')
              : require('@/assets/index/di1.png')
            " alt="" class="keicon-img" />
          <div :style="{ color: showPhone ? '#1664FF' : '#41464f' }">电话</div>
        </div>
        <div @mouseenter="showQrcode = true" @mouseleave="onQrcodeLeave" class="small-btn" style="margin-top: 10px">
          <img :src="showQrcode
              ? require('@/assets/index/xi2.png')
              : require('@/assets/index/xi1.png')
            " alt="" class="keicon-img" />
          <div :style="{ color: showQrcode ? '#1664FF' : '#41464f' }">
            小程序
          </div>
        </div>

        <!-- 电话卡片 鼠标悬停显示 -->
        <transition name="fade">
          <div class="contact-card phone-card" v-if="showPhone" @mouseenter="showPhone = true"
            @mouseleave="onPhoneLeave">
            <div class="card-inner">
              <div class="card-title">电话咨询</div>
              <div class="card-row">
                <div class="icon-box">
                  <img src="@/assets/index/phone.png" alt="" class="icon-img" />
                </div>
                <div>
                  <div class="row-title">热线电话</div>
                  <div class="row-value">0755-12344321</div>
                </div>
              </div>
              <div class="card-row">
                <div class="icon-box">
                  <img src="@/assets/index/email.png" alt="" class="icon-img" />
                </div>
                <div>
                  <div class="row-title">服务邮箱</div>
                  <div class="row-value">12345678@qq.com</div>
                </div>
              </div>
            </div>
            <div class="arrow-right"></div>
          </div>
        </transition>
      </div>

      <div class="contact-btnJiantou" @click="handleJiantou">
        <img src="@/assets/index/jiantou.png" alt="" />
      </div>
      <!-- <div class="contact-btn" @click="showQrcode = true">
        <i class="iconfont icon-qr"></i>
        <span>小程序</span>
      </div> -->
    </div>

    <!-- 小程序卡片 -->
    <transition name="fade">
      <div class="contact-card qrcode-card" v-if="showQrcode" @click.self="showQrcode = false">
        <div class="card-inner">
          <div class="qrcode-img"></div>
          <div class="qrcode-text">平台小程序码</div>
        </div>
      </div>
    </transition>

    <!-- 课程咨询弹窗 -->
    <!-- <transition name="fade">
      <div class="consult-modal" v-if="showConsult">
        <div class="modal-content">
          <div class="modal-header">
            <i class="iconfont icon-zixun"></i>
            <span>课程咨询</span>
            <span class="close" @click="showConsult = false">×</span>
          </div>
          <div class="modal-body">
            <div class="modal-left">
              <div class="msg-title">在线客服 20:23:31</div>
              <div class="msg-content">
                24小时在线答疑，<b>【课程】</b>中国无人机商用课程体系，<b>【考试】</b>可代报名考试，国内考点均可安排。<br />
                也可直接拨打热线电话。
              </div>
              <button class="blue-btn">24在线课程咨询</button>
              <div class="msg-input">
                <input type="text" placeholder="可以直接留言咨询哦~" />
                <button class="send-btn">
                  <i class="iconfont icon-send"></i>
                </button>
              </div>
            </div>
            <div class="modal-right">
              <div class="about-title">关于我们</div>
              <ul>
                <li>空管在线课程咨询 24h</li>
                <li>空管服务团队 <span class="link">基础-教研</span></li>
                <li>清楚在线 <span class="link">智能解答</span></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </transition> -->
  </div>
</template>

<script>
export default {
  name: "RightContact",
  data() {
    return {
      showPhone: false,
      showQrcode: false,
      showConsult: false,
    };
  },
  mounted() {
    // 点击空白关闭弹窗
    document.addEventListener("click", this.handleDocClick);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.handleDocClick);
  },
  methods: {
    handleJiantou() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    handleDocClick(e) {
      // 避免冒泡关闭
      if (!this.$el.contains(e.target)) {
        this.showPhone = false;
        this.showQrcode = false;
      }
    },
    onPhoneLeave() {
      // 延迟隐藏，避免鼠标快速移入移出导致闪烁
      setTimeout(() => {
        this.showPhone = false;
      }, 100);
    },
    onQrcodeLeave() {
      // 延迟隐藏，避免鼠标快速移入移出导致闪烁
      setTimeout(() => {
        this.showQrcode = false;
      }, 100);
    },
  },
};
</script>

<style scoped lang="scss">
.right-contact {
  position: fixed;
  top: 200px;
  right: 40px;
  z-index: 1000;

  .contact-btns {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;

    .keicon-img {
      width: 20px;
      margin-bottom: 5px;
    }

    .small-btn {
      font-size: 10px;
      margin-bottom: 5px;
      color: #41464f;
    }

    .contact-btnJiantou {
      width: 48px;
      height: 48px;
      background: #fff;
      border-radius: 24px;
      box-shadow: 0 2px 12px #e6eefa;
      color: #2176ff;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 22px;
      }
    }

    .contact-btn {
      width: 48px;
      height: 140px;
      background: #fff;
      border-radius: 24px;
      box-shadow: 0 2px 12px #e6eefa;
      color: #2176ff;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;

      &.main {
        background: #2176ff;
        color: #fff;
        font-weight: bold;

        span {
          color: #fff;
        }
      }

      i {
        font-size: 28px;
        margin-bottom: 8px;
      }

      span {
        writing-mode: vertical-rl;
        font-size: 16px;
        color: #2176ff;
      }
    }
  }

  .contact-card {
    position: absolute;
    top: 0;
    right: 70px;
    width: 320px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px #e6eefa;
    padding: 24px;
    z-index: 10;

    .card-inner {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .card-title {
      font-size: 14px;
      color: #666666;
      margin-bottom: 8px;
      text-align: left;
    }

    .card-row {
      display: flex;
      align-items: left;
      gap: 12px;
      background: #f7f9fa;
      border-radius: 8px;
      padding: 10px 12px;
      text-align: left;

      .icon-img {
        width: 48px;
      }

      i {
        font-size: 24px;
        color: #2176ff;
      }

      .row-title {
        font-size: 18px;
        color: #333;
      }

      .row-value {
        font-size: 14px;
        color: #666;
      }
    }
  }

  .qrcode-card {
    top: 130px;

    .card-inner {
      align-items: center;
    }

    .qrcode-img {
      width: 120px;
      height: 120px;
      background: #e0e0e0;
      border-radius: 12px;
      border: 6px solid #fff;
      margin-bottom: 12px;
    }

    .qrcode-text {
      color: #222;
      font-size: 16px;
      text-align: center;
    }
  }

  .consult-modal {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    background: #f7faff;
    border-radius: 16px;
    box-shadow: 0 8px 32px #2176ff22;
    z-index: 2000;

    .modal-content {
      padding: 0;
    }

    .modal-header {
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: bold;
      color: #2176ff;
      padding: 24px 32px 0 32px;

      i {
        font-size: 28px;
        margin-right: 10px;
      }

      .close {
        margin-left: auto;
        font-size: 28px;
        color: #888;
        cursor: pointer;
      }
    }

    .modal-body {
      display: flex;
      padding: 24px 32px 32px 32px;
      gap: 24px;

      .modal-left {
        flex: 2;

        .msg-title {
          font-size: 14px;
          color: #888;
          margin-bottom: 8px;
        }

        .msg-content {
          font-size: 15px;
          color: #222;
          margin-bottom: 18px;
        }

        .blue-btn {
          background: #2176ff;
          color: #fff;
          border: none;
          border-radius: 6px;
          padding: 8px 24px;
          font-size: 15px;
          margin-bottom: 18px;
          cursor: pointer;
        }

        .msg-input {
          display: flex;
          align-items: center;
          margin-top: 12px;

          input {
            flex: 1;
            border: 1px solid #e0e3e9;
            border-radius: 6px 0 0 6px;
            padding: 8px 12px;
            font-size: 15px;
            outline: none;
          }

          .send-btn {
            background: #2176ff;
            color: #fff;
            border: none;
            border-radius: 0 6px 6px 0;
            width: 40px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            i {
              font-size: 18px;
            }
          }
        }
      }

      .modal-right {
        flex: 1;
        background: #f0f4fa;
        border-radius: 8px;
        padding: 16px;

        .about-title {
          font-size: 16px;
          font-weight: bold;
          color: #2176ff;
          margin-bottom: 10px;
        }

        ul {
          padding: 0;
          margin: 0;
          list-style: none;

          li {
            font-size: 14px;
            color: #222;
            margin-bottom: 8px;

            .link {
              color: #2176ff;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}

/* 动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

<!-- 你需要引入iconfont或者用svg替换iconfont -->
<!-- 你可以用iconfont.cn下载合适的图标，或用element-plus的icon组件替换 -->
